<template>
    <div>
        <!-- url传参有2种方式  一种是 querystring   /url地址的形式 -->

        <!-- 图文列表区域 -->
       	<ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
                <router-link :to="'/home/newsinfo/' + item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h1>{{ item.title }}</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间 :{{ item.add_time | dateFormat('YYYY-MM-DD') }}</span>
                            <span>点击:{{ item.click }}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  data(){
      return {
          newsList : [], // 保存所有新闻列表的数组
      }
  },
  created(){
      this.getNewsList();
  },
  methods : {
      getNewsList(){
          this.$http.get('http://vue.studyit.io/api/getnewslist').then( result => {
              if(result.body.status === 0){
                  this.newsList = result.body.message;
              }else {
                  // 这里的Toast 是一个 js 组件,只能通过 js 调用的方式来使用,并不是把它
                  // 当作 标签来引入到页面当中, 所以如果想要在组件中调用 Toast 必须在自己的
                  // 组件中,按需导入  否则在子组件中是访问不到这个 js 对象的 
                 Toast('获取数据失败'); 
              }
          })
      }
  }
}
</script>

<style lang="scss" scoped>
    .mui-media-body {
        h1 {
            font-size: 13px;
            font-weight: 500;
        }
        p {
            color:#26a2ff;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }
    }
</style>
